<template>
	<view class="payForSuccess">
		<view class="payForSuccess-plate-1">
			<view class="top">
				<u-icon name="checkmark" color="#FFF" size="60"></u-icon>
				<view class="txt">
					<text>支付成功!</text>
					<text>感谢您的购买</text>
				</view>
			</view>
			<view class="pos-box">
				<view class="border-top">
					
				</view>
				<view class="border-btm">
					
				</view>
				<view class="box">
					<view class="price">
						￥<text>{{price}}</text>
					</view>
					<view class="info">
						<text>下单成功</text>
						<text>下单时间：{{time}}</text>
						<text>支付方式：微信支付</text>
					</view>
				</view>
			</view>
		</view>
		<view class="payForSuccess-plate-2">
			<button class="bg-btn" @click="goOrderDetails">订单详情</button>
			<navigator url="../../../../../home/home" open-type="switchTab" hover-class="none">
				<button class="border-btn">返回首页</button>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price:'0.00',
				time:'2020-20-20',
				id:0
			};
		},
		onLoad(options) {
			this.price = options.price
			this.time = this.formatDate(options.time)
			this.id = options.id
			console.log(this.time);
		},
		methods:{
			// 跳转到订单详情
			goOrderDetails(){
				uni.navigateTo({
					url:'../../../../../mine/order/order?num=2'
				})
			},
			formatDate(value) {
				let time = new Date(value * 1000)
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				let date = time.getDate()
				let hours = time.getHours()
				let minute = time.getMinutes()
				let second = time.getSeconds()
				if (month < 10) {
					month = '0' + month
				}
				if (date < 10) {
					date = '0' + date
				}
				if (hours < 10) {
					hours = '0' + hours
				}
				if (minute < 10) {
					minute = '0' + minute
				}
				if (second < 10) {
					second = '0' + second
				}
				return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
			},
		}
	}
</script>

<style lang="scss" scoped>
.payForSuccess{
	width: 100vw;
	min-height: 100vh;
	background-color: #f9f9f9;
	.payForSuccess-plate-1{
		width: 100vw;
		height: 375rpx;
		background-color: $zhuti-color;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.top{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 260rpx;
			.txt{
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				text:first-child{
					font-size: 40rpx;
					color: #fff;
				}
				text:last-child{
					font-size: 34rpx;
					color: #fff;
				}
			}
		}
		.pos-box{
			position: relative;
			.border-top{
				width: 695rpx;
				height: 15rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				background-color: #836931;
				box-shadow: 0rpx 15rpx 20rpx 10rpx #a7823c;
				z-index: 1000;
			}
			.border-btm{
				width: 695rpx;
				height: 15rpx;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				background-color: #a7823c;
			}
			.box{
				position: absolute;
				top: 15rpx;
				left: 15rpx;
				width: 666rpx;
				background-color: #fff;
				z-index: 1;
				.price{
					height: 165rpx;
					border-bottom: 1rpx dotted #a9a9a9;
					display: flex;
					align-items: center;
					justify-content: center;
					color: red;
					font-size: 26rpx;
					text{
						font-size: 40rpx;
					}
				}
				.info{
					padding: 60rpx 30rpx;
					display: flex;
					flex-direction: column;
					text{
						font-size: 28rpx;
						color: #333;
						margin-bottom: 30rpx;
					}
				}
			}
		}
	}
	.payForSuccess-plate-2{
		padding-top: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		button{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;
			width: 460rpx;
			height: 80rpx;
		}
	}
}
</style>
